<template>
  <div>
    <div class="main">
      <div style="height: 100%">
        <el-table style="overflow: auto" height="100%" :data="fields" stripe border highlight-current-row @row-click="
          (row) => {
            chooseField = row
          }
        ">
          <el-table-column label="组件名" width="160px">
            <template slot-scope="scope">
              <span>{{ scope.row.FFLD_Label }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编号" width="60px">
            <template slot-scope="scope">
              <span>
                {{ scope.row.FFLD_Type }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="识别码" width="180px">
            <template slot-scope="scope">
              <span>
                {{ scope.row.FFLD_TypeDesc }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="60px">
            <template slot="header">
              <i class="el-icon-plus" @click="addFieldVis = true"></i>
            </template>
            <template slot-scope="scope">
              <i class="el-icon-delete" @click="deleteField(scope.row.FFLD_ID)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="flex: 1; background-color: #f0f0f0" v-if="chooseField">
        <el-table style="overflow: auto" :data="chooseField.props" stripe border highlight-current-row>
          <el-table-column label="属性名">
            <template slot-scope="scope">
              <span>{{ scope.row.FLPR_Name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编码">
            <template slot-scope="scope">
              <span>
                {{ scope.row.FLPR_Code }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>
                {{ scope.row.FLPR_InputTypeDesc }}
              </span>
              <div v-if="scope.row.FLPR_InputTypeDesc == 'Number'">
                <span>增量：{{ scope.row.FLPR_NumberStep }}</span>
                <span style="margin-left: 20px">
                  最小值：{{ scope.row.FLPR_NumberMin }}
                </span>
                <span style="margin-left: 20px">
                  最大值：{{ scope.row.FLPR_NumberMax }}
                </span>
              </div>
              <div v-if="scope.row.FLPR_InputTypeDesc == 'Selections'">
                <div v-for="(item, index) in JSON.parse(scope.row.FLPR_Selections)" :key="index">
                  {{ item.Key }}: {{ item.Value }}
                </div>
              </div>
              <span v-if="scope.row.FLPR_InputTypeDesc == 'Interface'">
                :{{ scope.row.FLPR_Interface }}
              </span>
            </template>
          </el-table-column>

          <el-table-column label="备注">
            <template slot-scope="scope">
              <span>
                {{ scope.row.FLPR_Describe }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot="header">
              <i class="el-icon-plus" @click="addFieldPropVis = true"></i>
            </template>
            <template slot-scope="scope">
              <i class="el-icon-edit" @click="
                curProp = scope.row
              curProp.selections = JSON.parse(scope.row.FLPR_Selections)
              editFieldPropVis = true
                "></i>
              <i style="margin-left: 20px" class="el-icon-delete" @click="deleteFieldProp(scope.row.FLPR_ID)"></i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-drawer :visible.sync="addFieldVis" title="添加组件">
      <div style="padding: 20px">
        <el-form label-width="auto" :model="newField" ref="newField">
          <el-form-item label="组件名" prop="FFLD_Label" :rules="[{ required: true, message: '请填写组件名' }]">
            <el-input v-model="newField.FFLD_Label" placeholder="请输入组件名"></el-input>
          </el-form-item>
          <el-form-item label="编号" prop="FFLD_Type" :rules="[{ required: true, message: '请填写编号' }]">
            <el-input v-model="newField.FFLD_Type" placeholder="请填写编号"></el-input>
          </el-form-item>
          <el-form-item label="识别码" prop="FFLD_TypeDesc" :rules="[{ required: true, message: '请填写识别码' }]">
            <el-input v-model="newField.FFLD_TypeDesc" placeholder="请输入识别码"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="newField.FFLD_Describe" placeholder="请输入组件备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="addField" size="medium" type="primary" icon="el-icon-circle-check" title="添加">
              添加
            </el-button>
            <el-button @click="addFieldVis = false" size="medium" title="取消">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-drawer :visible.sync="addFieldPropVis" title="添加属性">
      <div style="padding: 20px">
        <el-form label-width="auto" :model="newProp" ref="newProp">
          <el-form-item label="属性名" prop="FLPR_Name" :rules="[{ required: true, message: '请填写属性名' }]">
            <el-input v-model="newProp.FLPR_Name" placeholder="请输入组件名"></el-input>
          </el-form-item>
          <el-form-item label="属性编码" prop="FLPR_Code" :rules="[{ required: true, message: '请填写编号' }]">
            <el-input v-model="newProp.FLPR_Code" placeholder="请填写编号"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="FLPR_InputType" :rules="[{ required: true, message: '请选择类型' }]">
            <el-select filterable v-model="newProp.FLPR_InputType" style="width: 100%">
              <el-option v-for="item in propTypes" :key="item.Description" :label="item.EnumTxt"
                :value="item.EnumValue"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="可选选项" v-if="newProp.FLPR_InputType == 40">
            <div v-for="(option, index) in newProp.selections" :key="index" style="margin-bottom: 5px">
              <el-input style="width: 40%" placeholder="请输入标志" v-model="option.Key" @input="selectionChange(newProp)">
                <template slot="prepend">{{ index + 1 }}</template>
              </el-input>
              <el-input style="width: 60%" placeholder="请输入值" v-model="option.Value" @input="selectionChange(newProp)">
                <template slot="append">
                  <el-button icon="el-icon-delete" @click="removeSelection(newProp, index)"></el-button>
                </template>
              </el-input>
            </div>
            <div style="margin-left: 20px">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
                @click="addSelection(newProp)">
                添加选项
              </el-button>
            </div>
          </el-form-item>

          <div v-if="newProp.FLPR_InputType == 50">
            <el-form-item label="数字增量">
              <el-input-number v-model="newProp.FLPR_NumberStep"></el-input-number>
            </el-form-item>
            <el-form-item label="最小值">
              <el-input-number v-model="newProp.FLPR_NumberMin"></el-input-number>
            </el-form-item>
            <el-form-item label="最大值">
              <el-input-number v-model="newProp.FLPR_NumberMax"></el-input-number>
            </el-form-item>
          </div>
          <div v-if="newProp.FLPR_InputType == 60">
            <el-form-item label="接口链接"> <el-input v-model="newProp.FLPR_Interface" placeholder="请填写接口链接"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="备注">
            <el-input v-model="newProp.FLPR_Describe" placeholder="请输入组件备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="addFieldProp" size="medium" type="primary" icon="el-icon-circle-check" title="添加">
              添加
            </el-button>
            <el-button @click="addFieldVis = false" size="medium" title="取消">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-drawer :visible.sync="editFieldPropVis" title="编辑属性">
      <div style="padding: 20px">
        <el-form label-width="auto" v-if="curProp" :model="curProp" ref="curProp">
          <el-form-item label="属性名" prop="FLPR_Name" :rules="[{ required: true, message: '请填写属性名' }]">
            <el-input v-model="curProp.FLPR_Name" placeholder="请输入组件名"></el-input>
          </el-form-item>
          <el-form-item label="属性编码" prop="FLPR_Code" :rules="[{ required: true, message: '请填写编号' }]">
            <el-input v-model="curProp.FLPR_Code" placeholder="请填写编号"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="FLPR_InputType" :rules="[{ required: true, message: '请选择类型' }]">
            <el-select filterable v-model="curProp.FLPR_InputType" style="width: 100%">
              <el-option v-for="item in propTypes" :key="item.Description" :label="item.EnumTxt"
                :value="item.EnumValue"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="可选选项" v-if="curProp.FLPR_InputType == 40">
            <div v-for="(option, index) in curProp.selections" :key="index" style="margin-bottom: 5px">
              <el-input style="width: 40%" placeholder="请输入标志" v-model="option.Key" @input="selectionChange(curProp)">
                <template slot="prepend">{{ index + 1 }}</template>
              </el-input>
              <el-input style="width: 60%" placeholder="请输入值" v-model="option.Value" @input="selectionChange(curProp)">
                <template slot="append">
                  <el-button icon="el-icon-delete" @click="removeSelection(curProp, index)"></el-button>
                </template>
              </el-input>
            </div>
            <div style="margin-left: 20px">
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text"
                @click="addSelection(curProp)">
                添加选项
              </el-button>
            </div>
          </el-form-item>

          <div v-if="curProp.FLPR_InputType == 50">
            <el-form-item label="数字增量">
              <el-input-number v-model="curProp.FLPR_NumberStep"></el-input-number>
            </el-form-item>
            <el-form-item label="最小值">
              <el-input-number v-model="curProp.FLPR_NumberMin"></el-input-number>
            </el-form-item>
            <el-form-item label="最大值">
              <el-input-number v-model="curProp.FLPR_NumberMax"></el-input-number>
            </el-form-item>
          </div>
          <div v-if="curProp.FLPR_InputType == 60">
            <el-form-item label="接口链接">
              <el-input v-model="curProp.FLPR_Interface" placeholder="请填写接口链接"></el-input>
            </el-form-item>
          </div>

          <el-form-item label="备注">
            <el-input v-model="curProp.FLPR_Describe" placeholder="请输入组件备注"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="saveFieldProp" size="medium" type="warning" icon="el-icon-circle-check" title="保存">
              保存
            </el-button>
            <el-button @click="addFieldVis = false" size="medium" title="取消">
              取消
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {
  getPropInputTypes,
  getFields,
  addField,
  deleteField,
  addFieldProp,
  saveFieldProp,
  deleteFieldProp,
  getFieldProps,
} from '@/api/flowCenter/field/fieldManage'

export default {
  data: function () {
    return {
      fields: [],
      propTypes: [],
      newField: {},
      newProp: {
        selections: [],
      },
      curProp: null,
      chooseField: null,

      addFieldVis: false,
      addFieldPropVis: false,
      editFieldPropVis: false,
    }
  },
  methods: {
    addSelection(prop) {
      prop.selections.push({ Key: '', Value: '' })
      this.$forceUpdate()
    },
    removeSelection(prop, index) {
      prop.selections.splice(index, 1)
      this.$forceUpdate()
    },
    selectionChange(prop) {
      prop.FLPR_Selections = JSON.stringify(prop.selections)
      this.$forceUpdate()
    },
    getPropInputTypes: function () {
      getPropInputTypes().then(({ data }) => {
        this.propTypes = data
      })
    },
    getFields: function () {
      getFields().then(({ data }) => {
        this.fields = data
      })
    },
    addField() {
      this.$refs.newField.validate((valid) => {
        if (valid) {
          this.$confirm('请确认录入信息是否无误。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              addField(this.newField).then(() => {
                this.getFields()
                this.newField = {}
                this.addFieldVis = false
              })
            })
            .catch(() => {
              return
            })
        } else {
          return false
        }
      })
    },
    deleteField(id) {
      this.$confirm('请确认删除该组件。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          deleteField(id).then(() => {
            this.getFields()
          })
        })
        .catch(() => {
          return
        })
    },
    addFieldProp() {
      if (!this.chooseField) {
        this.$message('请选择组件')
        return
      }
      this.$refs.newProp.validate((valid) => {
        if (valid) {
          this.$confirm('请确认录入信息是否无误。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              this.newProp.FLPR_FieldID = this.chooseField.FFLD_ID
              addFieldProp(this.newProp).then(() => {
                getFieldProps({ fieldId: this.chooseField.FFLD_ID }).then(
                  ({ data }) => {
                    this.chooseField.props = data
                    this.newProp = { selections: [] }
                    this.addFieldPropVis = false
                  }
                )
              })
            })
            .catch(() => {
              return
            })
        } else {
          return false
        }
      })
    },
    saveFieldProp() {
      this.$refs.curProp.validate((valid) => {
        if (valid) {
          this.$confirm('请确认录入信息是否无误。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info',
          })
            .then(() => {
              saveFieldProp(this.curProp).then(() => {
                getFieldProps({ fieldId: this.curProp.FLPR_FieldID }).then(
                  ({ data }) => {
                    this.curProp.props = data
                    this.editFieldPropVis = false
                  }
                )
              })
            })
            .catch(() => {
              return
            })
        } else {
          return false
        }
      })
    },
    deleteFieldProp(id) {
      this.$confirm('请确认删除该属性。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          deleteFieldProp(id).then(() => {
            getFieldProps({ fieldId: this.chooseField.FFLD_ID }).then(
              ({ data }) => {
                this.chooseField.props = data
              }
            )
          })
        })
        .catch(() => {
          return
        })
    },
  },
  created: function () {
    this.getPropInputTypes()
    this.getFields()
  },
}
</script>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 90vh;
  display: flex;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
